<!--
 * @description  :快递档案详情
 * @descriptionDetail:快递档案详情
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-10-16 13:18:15
-->
<template>
  <view :class="!isCom() ? 'page' : ''">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar title="快递档案维护" v-if="!isCom()"></theme-navbar>
    <!-- #endif -->
    <view class="content content-bg ifn-content" style="background-color: white">
      <u-form
        class="u-form-mobile"
        :label-style="labelStyle"
        :model="baseInfo"
        :error-type="['border-bottom', 'message',]"
        label-width="auto"
        label-position="top"
        ref="uForm"
      >
        <u-form-item label="快递公司名称" prop="expressCompanyName">
          <u-input
            v-model="baseInfo.expressCompanyName"
            :disabled="true"
            placeholder=""
          ></u-input>
        </u-form-item>
        <u-form-item label="登记单位">
          <u-input
            v-model="baseInfo.orgName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="网点名称">
          <u-input
            v-model="baseInfo.point"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="法定代表人">
          <u-input
            v-model="baseInfo.legalPerson"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="经纬度">
          <u-input
            v-model="baseInfo.lonlat"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="所在地">
          <u-input
            v-model="baseInfo.local"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="详细地址">
          <u-input
            v-model="baseInfo.address"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="联系方式">
          <u-input
            v-model="baseInfo.contactPhone"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="content u-page">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.images" :customStyle="customStyle"></fsection>
      <view class="u-form-m pl-10">
        <m-upload
          maxCount="99"
          :file-list="imgList"
          :disabled="true"
          :deletable="false"
          upApiUrl="uploadBase64File"
          :uploadParam="{'fiGroupCode':$FILE_GROUP_TYPE.k_transport_attr}"
        >
        </m-upload>
        <u-image
          width="100%"
          v-if="!imgList.length"
          height="330rpx"
          style="padding:0 0 34rpx 14rpx"
          mode="scaleToFill"
          :src="'/static/certificate/noImg.png'"
        >
        </u-image>
      </view>
    </view>
    <view class="u-form">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.connect" :customStyle="customStyle"></fsection>
      <list-view
        :i="0"
        :index="0"
        :load-data="loadCase"
        :init-load="false"
        height="300px"
        :noMoreDataTipShow="false"
        ref="mescrollItem0"
        class="specailListview"
      >
        <template slot-scope="d">
          <caseConnection :connection="d.data" class="case-sty"></caseConnection>
        </template>
      </list-view>
    </view>
    <view class="u-form">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.connectPerson" :customStyle="customStyle"></fsection>
      <list-view
        :i="1"
        :index="1"
        :load-data="loadCasePerson"
        :init-load="false"
        height="300px"
        :noMoreDataTipShow="false"
        ref="mescrollItem0"
        class="specailListview"
      >
        <template slot-scope="d">
          <person-connection :connection="d.data" class="case-sty"></person-connection>
        </template>
      </list-view>
    </view>
    <view class="u-form">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.connectCar" :customStyle="customStyle"></fsection>
      <list-view
        :i="2"
        :index="2"
        :load-data="loadCaseCar"
        :init-load="false"
        height="300px"
        :noMoreDataTipShow="false"
        ref="mescrollItem0"
        class="listview"
      >
        <template slot-scope="d">
          <car-connection :connection="d.data"></car-connection>
        </template>
      </list-view>
    </view>
  </view>
</template>

<script>
import fsection from '@/components/form-section.vue';
import caseConnection from '../components/caseConnection.vue';
import mUpload from '@/components/m-upload.vue';
import certificateService from '@/service/certificate/certificate.service.js';
import listView from '@/components/list_view.vue';
import intelligenceservice from '@/service/intelligence/intelligence.service';
import carConnection from '../components/carConnection';
import personConnection from '../components/personConnection';
export default {
  components: {
    caseConnection,
    mUpload,
    fsection,
    listView,
    carConnection,
    personConnection,
  },
  props: {
    record: {
      type: Object,
      default: () => {
        return undefined;
      },
    },
  },
  data() {
    return {
      customStyle: {
        padding: '20rpx 32rpx',
      },
      baseInfo: {},
      labelStyle: {
        fontWeight: 400,
        color: this.$theme.u_main_color,
        fontSize: '.75rem',
      },
      title: {
        images: '图片信息',
        connect: '案件关联',
        connectPerson: '关联人员',
        connectCar: '关联公路运输',
        connectMsg: '快递详情',
      },
      imgList: [],
    };
  },
  watch: {
    record: {
      handler(newVal, oldVal) {
        if (!newVal) return;
        this.loadData();
        this.initAuditImage();
      },
      immediate: false,
      deep: true,
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
    this.getListViewTop();
  },
  created() {
    this.loadData();
  },
  mounted() {
    this.initAuditImage();
  },
  methods: {
    getListViewTop() {
      this.$u.getRect('.case-search-lay').then((res) => {
        this.listViewTop = this.$u.sys().statusBarHeight + res.top + res.height + 'px';
      });
      this.$u.getRect('.submit-btns').then((res) => {
        this.bottomOffset = this.$u.sys().screenHeight - res.top + 'px';
      });
    },
    getListViewHeight() {
      let p = this.$u.sys().windowHeight - 44 - 48 - uni.upx2px(10) - this.$u.sys().statusBarHeight;
      // #ifdef H5-DINGDING || H5-WECHAT
      p = this.$u.sys().windowHeight - uni.upx2px(10) - 48 - this.$u.sys().statusBarHeight;
      // #endif
      return p + 'px';
    },
    loadData() {
      if (this.record) {
        this.baseInfo = this.record || {};
      } else {
        this.baseInfo = this.getRouteParam();
      }
      // if (this.$u.test.isEmpty(this.baseInfo.cityCode) && this.$u.test.isEmpty(this.baseInfo.countyCode)) {
      //   this.baseInfo.local = this.baseInfo.provCodeName;
      // } else if (this.$u.test.isEmpty(this.baseInfo.countyCode)) {
      //   this.baseInfo.local = this.baseInfo.provCodeName + "/" + this.baseInfo.cityCodeName;
      // } else if (!this.$u.test.isEmpty(this.baseInfo.countyCode)){
      //   this.baseInfo.local = this.baseInfo.provCodeName + "/" + this.baseInfo.cityCodeName + "/" + this.baseInfo.countyCodeName;
      // } else if (!this.$u.test.isEmpty(this.baseInfo.provCode)){
      //   this.baseInfo.local = "";
      // }
      this.baseInfo.local =
					this.$store.state.areaObj[this.baseInfo.countyCode] ||
					this.$store.state.areaObj[this.baseInfo.cityCode] ||
					this.$store.state.areaObj[this.baseInfo.provCode] ||
					'';
    },
    loadCase(page) {
      return new Promise((resolve, reject) => {
        let params = {
          page: page.num,
          limit: page.size,
          paras: {
            archiveUuid: this.baseInfo.uniqueKey,
            type: 'express-case',
          },
        };
        intelligenceservice
          .archiveCaseList(params)
          .then((res) => {
            if (res.success) {
              resolve({ data: { list: res.data, totalCount: res.count, }, });
            } else {
              this.$modal.alert(res.msg);
              resolve({ data: { list: [], totalCount: 0, }, });
            }
          })
          .catch((e) => {
            this.$u.toast('请求失败:' + e);
            resolve({
              count: 0,
              data: [],
            });
          });
      });
    },
    loadCasePerson(page) {
      return new Promise((resolve, reject) => {
        let params = {
          page: page.num,
          limit: page.size,
          paras: {
            archiveUuid: this.baseInfo.uniqueKey,
            type: 'express-person',
          },
        };
        intelligenceservice
          .archiveFamilyList(params)
          .then((res) => {
            if (res.success) {
              resolve({ data: { list: res.data, totalCount: res.count, }, });
            } else {
              this.$modal.alert(res.msg);
              resolve({ data: { list: [], totalCount: 0, }, });
            }
          })
          .catch((e) => {
            this.$u.toast('请求失败:' + e);
            resolve({
              count: 0,
              data: [],
            });
          });
      });
    },
    loadCaseCar(page) {
      return new Promise((resolve, reject) => {
        let params = {
          page: page.num,
          limit: page.size,
          paras: {
            archiveUuid: this.baseInfo.uniqueKey,
            type: 'express-car',
          },
        };
        intelligenceservice
          .archiveCarList(params)
          .then((res) => {
            if (res.success) {
              resolve({ data: { list: res.data, totalCount: res.count, }, });
            } else {
              this.$modal.alert(res.msg);
              resolve({ data: { list: [], totalCount: 0, }, });
            }
          })
          .catch((e) => {
            this.$u.toast('请求失败:' + e);
            resolve({
              count: 0,
              data: [],
            });
          });
      });
    },
    initAuditImage() {
      certificateService
        .goFiles(this.baseInfo.uuid, this.$FILE_GROUP_TYPE.k_transport_attr)
        .then((res) => {
          if (res.success) this.imgList = res.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 是组件
    isCom() {
      return this.record;
    },
  },
};
</script>

<style scoped lang="scss">
	@import './add.scss';
	.page {
		padding: 0;
	}
	.listviewSty {
		padding: $cm-conent-padding-column $cm-content-paddng-row;
	}
	.u-form-mobile {
		padding: 0 32rpx 20rpx 32rpx;
	}
</style>
